<template>
	<view class="my">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-30">
			<view class="u-m-r-10 image">
				<u-upload ref='upload' :action="action" max-count=1 width='0' height='0' :custom-true="true" :form-data="formData"
					:show-upload-list="false" :deletable="false" :show-progress="false" :max-size="2*1024*1024"
					:multiple="false" :before-upload="beforeUpload" @on-success="uploadSuccess" @on-remove="onRemove">
					<u-avatar slot="addBtn" :src="userInfo.avatar_url" size="140"></u-avatar>
				</u-upload>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{userInfo.name}}</view>
				<view class="u-font-14 u-tips-color">邮箱:{{userInfo.email}}</view>
			</view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="rmb-circle" title="个人信息" @click='setInfo'></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="order" title="全部订单"></u-cell-item>
				<u-cell-item icon="star" title="收藏中心" @click='tocollect'></u-cell-item>
				<u-cell-item icon="coupon" title="收货地址" @click='toaddress'></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="reload" title="退出登录" @click='exit'></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		exit,
		getToken,
		upadateAvater,
		getUser
	} from "../../common/http.api.js"
	export default {
		data() {
			return {
				fileList: [],
				action: "",
				userInfo: {},
				show: true,
				formData: {},
				action: "",
				_uploadFileName: ''
			}
		},
		onLoad() {
			if (!this.$u.utils.login()) return;
			this.userInfo = JSON.parse(uni.getStorageSync('UserInfo')).userInfo;

		},
		methods: {
			setInfo() {
				uni.navigateTo({
					url: '/pages/message/message'
				})
			},
			exit() {
				this.$u.api.exit().then(res => {
					this.$store.dispatch("exitLogin");
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/home/home"
						})
					}, 500)
				})
			},
			toaddress(){
				uni.navigateTo({
					url:'/pages/address/address'
				})
			},
			tocollect(){
				uni.navigateTo({
					url:'/pages/my/collect'
				})
			},
			async beforeUpload(index, list) {
				const {
					file
				} = list[0];
				// #ifdef H5
				const fileName = file.name
				// #endif
				// #ifndef H5
				const fileName = file.path
				// #endif

				const ossToken = await this.$u.api.getOssToken();
				this.action = ossToken.data.host;
				console.log(this.action)
				// 处理唯一文件名
				const suffix = fileName.slice(fileName.lastIndexOf("."));
				const uploadFileName = this.$u.guid(20) + suffix;
				this._uploadFileName = uploadFileName;

				this.formData = {
					"key": uploadFileName, //上传的文件名
					"policy": ossToken.data.policy,
					"OSSAccessKeyId": ossToken.data.accessid,
					"success_action_status": "200",
					"signature": ossToken.data.signature
				}
				return true
			},
			async uploadSuccess() {
				this.$refs.upload.remove(0);
				await this.$u.post("/api/user/avatar", {
					avatar: this._uploadFileName
				});
				const userInfo = await this.$u.api.getUser();
				this.$store.dispatch('asynUser', userInfo.data);

				this.$u.toast('更新成功')
			},
		}
	}
</script>

<style lang="scss">
	.my {
		.image {
			width: 140rpx;
			height: 140rpx;
			// background-color: red;
		}
	}

	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
</style>
